<script>
import { onMounted, reactive, toRefs } from "vue";
import { Toast } from "vant";
import { Dialog } from 'vant';
export default {
  setup() {
    const buy = reactive({
      cost: 1,
      lists: [
        {
          id: 1,
          num: "5元",
          num2: 500,
        },
        {
          id: 2,
          num: "10元",
          num2: 1000,
        },
        {
          id: 3,
          num: "30元",
          num2: 5000,
        },
        {
          id: 4,
          num: "50元",
          num2: 10000,
        },
        {
          id: 5,
          num: "100元",
          num2: 5000,
        },
        {
          id: 6,
          num: "1000元",
          num2: 100000,
        },
      ],
      classTabid: 1,
      nownum: 0, //余额
      name: "",
      addnum: 500, //默认数量
    });
    onMounted(() => {
      buy.nownum = Number(window.localStorage.getItem("money"));
      buy.name = window.localStorage.getItem("name");
    });
    const Dialogs = () =>{
       Dialog.confirm({
          title: "提醒",
          message: "确认购买吗？",
        })
        .then(() => {
          Toast("充值成功");
          buy.nownum += Number(buy.addnum);
          window.localStorage.setItem("money", buy.nownum);
        })
        .catch(() => {
          console.log("取消");
        });
     
    }
    const tabid = (id, num2) =>{
      buy.classTabid = id;
      buy.addnum = num2;
    }
    return {
      ...toRefs(buy),
      tabid,
      Dialogs,
    };
  },
};
</script>

<template>
  <div class="container buy">
    <div class="top">
      <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
      <span>鲨粮充值</span>
    </div>
    <div class="user">
      <!-- 用户信息 -->
      <div class="info">
        <div class="left">用户昵称</div>
        <div class="right">{{ name }}</div>
      </div>
      <div class="info">
        <div class="left">帐号</div>
        <div class="right">19854547831</div>
      </div>
      <div class="info">
        <div class="left">鲨粮余额</div>
        <div class="right">{{ nownum }}鲨粮</div>
      </div>
    </div>

    <div class="line"></div>

    <!-- 充值 -->
    <div class="cost">
      <div class="chose">选择充值方式：</div>
      <div class="recharge">
        <div class="card" @click="cost = 1" :class="{ active: cost == 1 }">
          <i class="iconfont icon-zhifubaozhifu"></i>
          <div class="name">支付宝</div>
        </div>
        <div class="card" @click="cost = 2" :class="{ active: cost == 2 }">
          <i class="iconfont icon-weixinzhifu"></i>
          <div class="name">微信</div>
        </div>
      </div>

      <div class="choses">选择充值金额：</div>
      <div class="recharges">
        <div 
        class="card" 
        v-for="(item, index) in lists" 
        :key="index"
        @click="tabid(item.id, item.num2)"
        :class="{ active: classTabid == item.id }"
        >
          <i class="iconfont">{{ item.num }}</i>
          <div class="name">{{ item.num2 }}鲨粮</div>
        </div>
      </div>
    </div>

    <div type="primary" @click.stop="Dialogs">
      <div class="sbut">
        <a class="view_more">立即充值</a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.buy {
  background-color: #fff;
  .top {
    height: 49px;
    height: 49px;
    padding: 5px 10px;
    background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .iconfont {
      color: #fff;
      font-size: 20px;
    }
    span {
      flex: 1;
      // text-align: center;
      padding-left: 33%;
      font-size: 18px;
      color: #fff;
    }
  }
  .user {
    padding: 0px 15px 15px;
    .info {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      .left {
        color: #888888;
      }
      .right {
        color: #222222;
      }
    }
  }
  .line {
    height: 10px;
    background-color: #f4f4f4;
  }
}

// 充值
.buy .balance {
  color: #50576a;
  font-size: 16px;
  padding: 14px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
  i {
    color: red;
  }
}

.buy .cost {
  padding: 15px 15px 0;
  .chose {
    height: 40px;
    font-size: 16px;
    color: #4c4c4c;
  }
  .recharge {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .card {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #dfdedd;
      padding: 12px 8px 10px;
      background: #fafafa;
      color: #a9a9a9;
      border-radius: 5px;
      margin-bottom: 20px;
      &:nth-child(1) {
        margin-right: 20px;
      }
      .icon-zhifubaozhifu {
        color: #1578ff;
        margin-bottom: 4px;
        font-size: 34px;
      }
      .icon-weixinzhifu {
        margin-bottom: 4px;
        font-size: 34px;
        color: #12d31e;
      }
    }
    .active {
      border: 1px solid #e95e56;
      position: relative;
      .name {
        color: #e95e56;
        &::after {
          content: "";
          position: absolute;
          right: 0;
          bottom: 0;
          background: url(../assets/img/select.png) no-repeat;
          width: 20px;
          height: 20px;
          background-size: 20px;
        }
      }
    }
  }
  .choses {
    height: 40px;
    font-size: 16px;
    color: #4c4c4c;
  }
  .recharges {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .card {
      width: 31%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #dfdedd;
      padding: 12px 8px 10px;
      background: #fafafa;
      color: #a9a9a9;
      border-radius: 5px;
      margin-bottom: 10px;
      .iconfont {
        margin-bottom: 4px;
      }
    }
    .active {
      border: 1px solid #e95e56;
      position: relative;
      .iconfont {
        color: #e95e56;
        &::after {
          content: "";
          position: absolute;
          right: 0;
          bottom: 0;
          background: url(../assets/img/select.png) no-repeat;
          width: 20px;
          height: 20px;
          background-size: 20px;
        }
      }
    }
  }
}

.buy .sbut {
  a {
    border: 1px solid #dfdfdf;
    background: linear-gradient(to right, #7b0b3b, #d51c78, #7b0b3b);
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 3px;
    margin: 18px 30px;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 3px;
  }
}
</style>